<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<section id="container">
<#include "sider.ftl">  <#--引入头部和导航栏-->
<#--本页为模板，请大家复制之后使用，不要直接在模板上加东西-->
<#--大家在测试自己的页面时，在controller中TestController     test3.do进行测试      在地址栏输入localhost:8080/test3.do-->
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <section class="panel">
                        <header class="panel-heading" style="color:lightseagreen;">
                            报案理赔审核管理
                        </header>
                        <div class="panel-body">
                            <div id="app">
                                <div>
                                <div style="display: inline-block">
                                    <button type="button" id="0" class="getState btn btn-warning">只看未审</button>
                                    <button type="button" id="2" class="getState btn btn-danger">未审核通过</button>
                                    <button type="button" id="1" class="getState btn btn-success">审核通过未理赔</button>
                                    <button type="button" id="3" class="getState btn btn-success">审核通过理赔完成</button>
                                </div>
                                <form class="form-inline bg-danger" role="form" style="display: inline-block;float:right">
                                    输入用户、受理员、品牌、地点、单号
                                    <div class="form-group">
                                        <label class="sr-only" for="keyword">用户名称</label>
                                        <input type="text" class="form-control" id="keyword" placeholder="关键字">
                                    </div>
                                    <button type="button" id="findUser" class="btn btn-success">查询报案</button>

                                </form>
                                </div>

                                <div class="table-responsive" id="tableDisplay" style="clear:right">
                                    <table class="table">
                                        <thead>
                                        <tr class="success">
                                            <td>序号</td>
                                            <td>用户</td>
                                            <td>投保单号</td>
                                            <td>报案时间</td>
                                            <td>备注</td>
                                            <td>车牌</td>
                                            <td>地点</td>
                                            <td>金额</td>
                                            <td>受理员工</td>
                                            <td>审核状态</td>
                                            <td>操作</td>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="active" v-for="(item,index) in result">
                                            <td>{{index+1}}</td>
                                            <td>{{item.order.user.sname}}</td>
                                            <td>{{item.order.oid}}</td>
                                            <td>{{item.reportTime}}</td>
                                            <td>{{item.remarks}}</td>
                                            <td>{{item.cars.brand}}</td>
                                            <td>{{item.caseLocation}}</td>
                                            <td>{{item.payAccount}}</td>
                                            <td>{{item.emp.empName}}</td>
                                            <td>
                                                <span v-if="item.caseState==0" style="color:orange;">等待审核</span>
                                                <span v-if="item.caseState==1" style="color: limegreen">审核通过</span>
                                                <span v-if="item.caseState==2" style="color: red">审核不通过</span>
                                                <span v-if="item.caseState==3" style="color: limegreen">审核通过</span>
                                            </td>
                                            <td><a href='#' @click="checkEvent(item.caseUuid,item.caseState)"
                                                   id="a">审核</a></td>

                                        </tr>
                                        </tbody>
                                        <tr>
                                            <td colspan="10">
                                                <div id="pagenav"></div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
        </section>
    <#include "/foot.html"><#--引入底部-->
    </section>
</section>
</body>
</html>
<script>
    var currPage = null;
    var app = new Vue({
        el: '#app',
        data: {
            result: []
        }
    });
    var getCheckPageList = function (curr) {
        currPage = curr || 1;
        $.ajax({
            type: 'POST',
            url: '/check/getCasePage.do',
            dataType: 'json',
            data: {
                pageSize: 3,
                pageNum: curr || 1,
                key: $("#keyword").val()
            },
            success: function (msg) {
                app.result = msg.page;
                if (app.result.length == 0) {
                    $("#tableDisplay").css("display", "none");
                    $("#app").find("p").remove();
                    $("#app").append("<p>尚未有相关记录</p>");
                } else {
                    $("#tableDisplay").css("display", "");
                    $("#app").find("p").remove();
                }
                laypage({
                    cont: 'pagenav',//分页容器
                    pages: msg.totalPage,//总页数
                    skin: '#CD00CD',
                    skip: 'true',
                    groups: 4,//连续显示分页数
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getCheckPageList(obj.curr);
                        }
                    }
                });
            }
        })
    }

    getCheckPageList();

    $("#findUser").click(function () {
        getCheckPageList();
    });
    $("#keyword").keyup(function () {
        getCheckPageList();
    });
    /*================================================================================================*/

    var getCaseStateList = function (curr, cs) {
        $.ajax({
            type: 'POST',
            url: '/case/caseStateList.do',
            dataType: 'json',
            data: {
                pageNum: curr || 1,
                pageSize: 10,
                caseState: cs
            }, success: function (data) {
                app.result = data.page;
                if (app.result.length == 0) {
                    $("#tableDisplay").css("display", "none");
                    $("#app").find("p").remove();
                    $("#app").append("<p>尚未有相关记录</p>");
                } else {
                    $("#tableDisplay").css("display", "");
                    $("#app").find("p").remove();
                }
                laypage({
                    cont: 'page',
                    pages: data.totalPages,
                    skin: '#CD00CD',
                    first: '首页',
                    last: '尾页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getCaseStateList(obj.curr);
                        }
                    }

                });
            }

        });
    }

    $(".getState").click(function () {
        var curr = curr || 1;
        var cs = $(this).attr("id");
        getCaseStateList(curr, cs);
    });
    /* var validateCheck=function () {
         /!*alert("#state").text())*!/
         if($("#state").text()==1||$("#state").text()==2||$("#state").text()==3){
             $("#a").css("background","#00FFFF");
         }
     }
     validateCheck();*/
    var checkEvent = function (caseUuid, caseState) {
        if (caseState == 1 || caseState == 2 || caseState == 3) {
            layer.msg("已经审核过了", {icon: 2});
            return;
            /*alert(caseState)*/
        }
        layer.confirm('是否通过？', {
                    btn: ['通过', '不通过', '取消']
                }, function () {
                    $.ajax({
                        type: 'POST',
                        url: '/check/changeCaseState.do',
                        /* dataType:'json',后台往前台返回的类型是map的时候再用，如果是string的话，用就出错*/
                        data: {
                            caseUuid: caseUuid,
                            caseState: 1
                        },
                        success: function (msg) {
                            if (msg == "true") {
                                layer.msg('审核通过', {icon: 6});
                                getCheckPageList(currPage);
                            } else {
                                layer.msg('操作失败', {icon: 2});
                                getCheckPageList(currPage);
                            }
                        }
                    });
                }, function () {
                    $.ajax({
                        type: 'POST',
                        url: '/check/changeCaseState.do',
                        data: {
                            caseUuid: caseUuid,
                            caseState: 2
                        },
                        success: function (msg) {
                            if (msg == "true") {
                                layer.msg('审核不通过', {icon: 5});
                                getCheckPageList(currPage);
                            } else {
                                layer.msg('操作失败', {icon: 2});
                                getCheckPageList(currPage);
                            }
                        }
                    });
                }, function () {

                }
        );
    }
</script>